<template>
    <div class="app-container">
        <el-form :inline="true" :model="getFormDate" class="demo-form-inline">
            <el-form-item>
                <el-input size="mini" v-model="getFormDate.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="getUsers" size="mini">查询</el-button>
            </el-form-item>
        </el-form>
        <el-button style="margin-bottom: 5px;" size="mini" @click="add">新增</el-button>
        <!-- <el-button style="margin-bottom: 5px;" size="mini" @click="handlerBatchDelete">批量删除</el-button> -->
        <el-table size="mini" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    <el-button size="mini" type="text" @click="handleSelect(scope.$index, scope.row)">选品</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column prop="legal" label="法人">
            </el-table-column>
        </el-table>
        <el-pagination style="float: right;margin-top: 5px;" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize"
            layout="prev, pager, next, jumper" :total="totalNum">
        </el-pagination>
        <el-dialog title="添加" :visible.sync="dialogVisibleAdd" width="30%">
            <el-form :model="addFormData" label-width="80px" ref="addFormData">
                <el-form-item label="名称">
                    <el-input v-model="addFormData.name" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="法人">
                    <el-input v-model="addFormData.legal" placeholder="请输入法人"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="createStore">确认</el-button>
                    <el-button @click="resetFormAdd('addFormData')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="修改" :visible.sync="dialogVisibleUpdate" width="30%">
            <el-form :model="updateFormData" label-width="80px">
                <el-form-item label="名称">
                    <el-input v-model="updateFormData.name" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="法人">
                    <el-input v-model="updateFormData.legal" placeholder="请输入法人"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="updateStore">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="选品" :visible.sync="selectFormVisible" width="50%">
            <el-steps :active="active" finish-status="success">
                <el-step title="步骤 1" description="类型选择"></el-step>
                <el-step title="步骤 2" description="水果选择"></el-step>
            </el-steps>
            <el-button v-if="active == 0" size="mini" @click="next">下一步</el-button>
            <el-button v-if="active == 1" size="mini" @click="top">上一步</el-button>
            <el-table v-if="active == 0" size="mini" :data="categoryTableData"
                @selection-change="handleSelectionCategory" style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="status" label="状态">

                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status == 1" type="success">启用</el-tag>
                        <el-tag v-else type="danger">禁止</el-tag>
                    </template>
                </el-table-column>
            </el-table>
            <el-table v-else size="mini" :data="fruitTableData" @selection-change="handleSelectionFruit"
                style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="名称">
                </el-table-column>
                <el-table-column prop="image" label="图片">

                    <template slot-scope="scope">
                        <el-image style="width: 70px; height: 70px"
                            :src="scope.row.image ? scope.row.image : ''"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="category.name" label="分类">
                </el-table-column>
                <el-table-column prop="number" label="数量">
                </el-table-column>
                <el-table-column prop="price" label="价格">
                </el-table-column>
                <el-table-column prop="content" label="介绍">
                </el-table-column>
            </el-table>
            <el-button v-if="active == 0" style="float: right;margin-top: 10px;margin-bottom: 10px;" size="mini"
                @click="saveCategory">保存</el-button>
            <el-button v-if="active == 1" style="float: right;margin-top: 10px;margin-bottom: 10px;" size="mini"
                @click="saveFruit">保存</el-button>
        </el-dialog>
    </div>
</template>

<script>
import {
    getStoreByPage, deleteStore, getStoreById, updateStoreById,
    batchDeleteStore, addStore, batchAddCategory, batchAddFruit, deleteMyCategoryById, deleteMyFruitById
} from "@/api/store.js"
import {
    getCategoryByPage
} from "@/api/category.js"
import {
    getFruitByPage
} from "@/api/fruit.js"
export default {
    data() {
        return {
            active: 0,
            list: null,
            isSave: false,
            fruitTableData: [],
            categoryTableData: [],
            selectFormVisible: false,
            listLoading: true,
            getFormDate: {},
            roles: [],
            tableData: [],
            multipleSelection: [],
            ids: [],
            statusList: [
                {
                    value: 1,
                    label: "启用"
                },
                {
                    value: 0,
                    label: "禁止"
                }
            ],
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            dialogVisibleAdd: false,
            dialogVisibleUpdate: false,
            dialogVisibleSetPermisssion: false,
            updateFormData: {},
            addFormData: {
                username: '',
                password: '',
                nickName: '',
                gender: '',
                mobile: '',
                email: '',
                roles: '',
            },
            defaultExpandedKeys: [],
            defaultCheckedKeys: [],
            pageSize: 10,
            currentPage: 1,
            totalNum: 0,
            updateId: '',
            categoryList: [],
            fruitList: [],
            rowId:""
        }
    },
    created() {
        this.initTableData()

    },
    methods: {
        saveCategory() {
            this.isSave = false
            if (this.categoryList.length > 0) {
                this.ids = this.categoryList.map(item => {
                    return item.id
                })
                let senddata = {
                    ids: this.ids,
                    id: this.rowId
                }
                batchAddCategory(senddata).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success("添加成功")
                        this.isSave = true
                        this.next()
                    }
                })
            } else {
                this.$message.warning("请先选择")
            }
        },
        saveFruit() {
            if (this.fruitList.length > 0) {
                this.ids = this.fruitList.map(item => {
                    return item.id
                })
                let senddata = {
                    ids: this.ids,
                    id: this.rowId
                }
                batchAddFruit(senddata).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success("添加成功")
                        this.active = 3
                        this.selectFormVisible = false
                        // this.initTableData()
                    }
                })
            } else {
                this.$message.warning("请先选择")
            }
        },
        next() {
            if (this.isSave == true) {
                this.active = this.active + 1
            } else {
                this.$message.warning("请先保存当前步骤")
            }
        },
        top() {
            this.active = this.active - 1
        },
        initCategory() {
            getCategoryByPage({ page: 1, size: 100 }).then(res => {
                this.categoryTableData = res.data.data.records
            })
        },
        initFruit() {
            getFruitByPage({ page: 1, size: 100 }).then(res => {
                this.fruitTableData = res.data.data.records
            })
        },
        handleSelectionCategory(value) {
            this.categoryList = value
            console.log("this.categoryList", this.categoryList);
        },
        handleSelectionFruit(value) {
            this.fruitList = value
            console.log("this.fruitList", this.fruitList);
        },
        resetFormAdd(formName) {
            this.addFormData = {}
            this.$refs[formName].resetFields();
        },
        createStore() {
            addStore(this.addFormData).then(res => {
                if (res.data.code == 200) {
                    this.$message.success("添加成功")
                    this.dialogVisibleAdd = false
                    this.initTableData();
                }else{
                    this.$message.warning(res.data.message)
                }
            })
        },
        getAllCheckedKeys() {
            const treeDataRef = this.$refs.treeData;
            // getCheckedNodes:全选的集合，getHalfCheckedNodes半选的集合
            // , ...treeDataRef.getHalfCheckedNodes()
            const treeDataList = [...treeDataRef.getCheckedNodes(), ...treeDataRef.getHalfCheckedNodes()];
            let tableDataIds = treeDataList.map(item => {
                return item.id
            })
        },
        updateStore() {
            updateStoreById(this.updateFormData).then(res => {
                if (res.data.code == 200) {
                    this.$message.success("修改成功")
                    this.dialogVisibleUpdate = false
                    this.initTableData();
                }
            })
        },
        handlerBatchDelete() {
            if (this.multipleSelection.length > 0) {
                this.ids = this.multipleSelection.map(item => {
                    return item.id
                })
                batchDeleteStore(this.ids).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success("批量删除成功")
                        this.initTableData()
                    }
                })
            } else {
                this.$message.warning("请先选择删除项")
            }
        },
        initTableData(page) {
            let senddata = {
                ...this.getFormDate,
                size: this.pageSize,
                page: page ? page : this.currentPage
            }
            getStoreByPage(senddata).then(res => {
                if (res.data.code == 200) {
                    this.tableData = res.data.data.records
                    this.totalNum = res.data.data.total
                    this.defaultExpandedKeys = res.data.data.records.map(item => {
                        return item.id
                    })
                }
            })
        },
        add() {
            this.dialogVisibleAdd = true
        },
        handleSelect(index, row) {
            this.selectFormVisible = true
            this.rowId = row.id
            this.initCategory()
            this.initFruit()
        },
        handleEdit(index, row) {
            this.dialogVisibleUpdate = true
            getStoreById(row.id).then(res => {
                if (res.data.code == 200) {
                    this.updateFormData = res.data.data
                }
            })
        },
        handleDelete(index, row) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteStore(row.id).then(res => {
                    if (res.data.code == 200) {
                        this.$message.success("删除成功")
                        this.initTableData();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        getUsers() {
            this.initTableData();
        },
        toggleSelection(rows) {
            if (rows) {
                rows.forEach(row => {
                    this.$refs.multipleTable.toggleRowSelection(row);
                });
            } else {
                this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.initTableData(val)
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
            this.checkAll = checkedCount === this.cities.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        }
    }
}
</script>

<style>
.el-dialog {
    position: absolute;
    top: -40px;
    margin-left: 550px;
}
</style>
